<template>
	<div class="custom-table">
		<!-- max-height="500" -->
		<el-table :data="tableData" stripe border @sort-change="onSortChange" @selection-change="onSelectionChange">
			<!-- <el-table-column type="selection" width="40"> -->
			<el-table-column v-if="is_show_table_select" type="selection" width="40">
			</el-table-column>
			<!-- 数据循环体 -->

			<el-table-column v-for="(item, index) in table_columns" :key="item.field" :prop="item.field" :label="item.field_title"
				:width="item.table_width" :sortable="item.column_sortable"
				:show-overflow-tooltip="true || item.column_show_overflow_tooltip"
				:fixed="item.field == 'id' || item.field == 'title'">
				<template slot-scope="scope">
					<!-- {{ scope.row }} -->
					<!-- scope.row[item.column] -->
					<div class="render-type render-text" v-if="!item.table_render_type || item.table_render_type == 'text'">
						{{ scope.row[item.table_field || item.field] }}
					</div>
					<div class="render-type render-tag" v-else-if="item.table_render_type == 'tag'">
						<template v-if="table_column_tag_map && table_column_tag_map[item.field] && table_column_tag_map[item.field][scope.row[item.field]]">
							<el-tag :type="table_column_tag_map[item.field][scope.row[item.field]].type"> {{
												    table_column_tag_map[item.field][scope.row[item.field]].title }}</el-tag>
						</template>
					</div>
					<div class="render-type render-image" v-else-if="item.table_render_type == 'image'">
						<el-image fit="cover" style="width: 30px; height: 30px" :src="scope.row[item.field]"
							:preview-src-list="[scope.row[item.field]]">
						</el-image>
					</div>
					<div class="render-type render-image-list" v-else-if="item.table_render_type == 'image-list'">
						<div class="render-image-item" v-for="(image_item, image_index) in scope.row[item.field]">
							<el-image fit="cover" style="width: 30px; height: 30px" :src="image_item"
								:preview-src-list="scope.row[item.field]">
							</el-image>
						</div>
					</div>
					<div class="render-type render-file" v-else-if="item.table_render_type == 'file'">
						<div class="file-list" v-if="scope.row[item.field]">
							<el-button type="text" class="file-item" @click="do_file_preview(scope.row[item.field])">
								查看附件
							</el-button>
						</div>
					</div>
				</template>
			</el-table-column>

			<!-- 操作 -->
			<el-table-column v-if="table_row_actions.length" fixed="right" label="操作" width="150">
				<template slot-scope="scope">
					<div class="row-action-list" v-if="scope.row.is_allow_table_row_actions != -1">
						<div class="row-action-item" v-for="(action_item, aIndex) in table_row_actions"
							v-if="(!action_item.condition || scope.row[action_item.condition.field] == action_item.condition.field_value)"
							:data-type="action_item.type || ''"
							>
							<el-button v-if="action_item.title != '更多' " @click="doTableRowAction(action_item, scope.row)"
								type="text">{{ action_item.title  }}</el-button>
								
							<el-dropdown v-else-if="action_item.title == '更多'"
								@command="(title) => doTableRowAction({ title: title }, scope.row)">
								<el-button type="text">更多</el-button>

								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item v-for="(sub_item, sindex) in action_item.child" :key="sindex" :command="sub_item.title">
									{{sub_item.title }}
									</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>

						<!-- 列表操作 -->
						<!-- <div class="row-action" v-if="tableRowActionButtons.includes('编辑')">
                <el-button @click="handleTableRowEdit(scope.row)" type="text"
                  >编辑</el-button
                >
              </div>

              <div class="row-action" v-if="tableRowActionButtons.includes('删除')">
                <el-button @click="handleTableRowDelete(scope.row)" type="text"
                  >删除</el-button
                >
              </div>

              <div class="row-action" v-if="tableRowActionButtons.includes('更多')">
                <el-dropdown
                  @command="(command) => handleTableRowCommand(command, scope.row)"
                >
                  <el-button type="text">更多</el-button>

                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="(sub, sindex) in tableRowMoreActions"
                      :key="sindex"
                      :command="sub.title"
                      >{{ sub.title }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </div> -->
					</div>
				</template>
			</el-table-column>
			<!-- 操作 -->
		</el-table>



		<!-- 图片预览 -->
		<el-dialog title="查看" :visible.sync="preview_show">
			<div class="preview-box">
				<el-image fit="contain" style="width: 400px; height: 400px" :src="preview_image_url"
					:preview-src-list="[preview_image_url]">
				</el-image>
			</div>

		</el-dialog>

	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		name: "w-table",
		components: {},
		props: {
			not_use_tableData: { //表单数据
				type: Array,
				default: function() {
					return [
						// {
						//     id: '1',
						//     title: '张三',
						// }
					];
				},
			},
			not_use_table_columns: { //表单列配置
				type: Array,
				default: function() {
					return [
						// {
						//     column: "roleId",
						//     field_title: "ID",
						//     table_width: "auto",
						//     column_sortable: false, //是否可排序
						//     column_show_overflow_tooltip: false, //悬浮是否展示提示
						//     table_render_type: '',//'' || text || tag || image || image-list || file
						// }
					];
				},
			},
			not_use_table_row_actions: { //表单行操作
				type: Array,
				default: function() {
					return [{
							title: '编辑',
						},
						{
							title: '删除',
						},
						// {
						//   title: '更多', 
						//   child: [
						//     {
						//       title: "设为热搜",
						//     },
						//     {
						//       title: "查看评论",
						//     },
						//   ]
						// },
					];
				},
			},
			not_use_radio_options_map: { //表格标签设置
				type: Object,
				default: function() {
					return {
						// {
						//     status: [
						//         {
						//             title: '正常',
						//             value: 0,
						//             type: '',
						//         },
						//         {
						//             title: '停用',
						//             value: 1,
						//             type: 'info',
						//         },
						//     ]
						// }
					}
				},
			},
			is_show_table_select: { //展示表格行是否允许勾选
				type: Boolean,
				default: false
			},
			is_show_table_action: { //展示表格行是否允许操作
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				tableData: [],
				table_columns: [],
				table_row_actions: [],
				radio_options_map: {},
				table_column_tag_map: {},

				//图片预览
				preview_image_url: '',
				preview_show: false,
			};
		},
		computed: {
			// table_column_tag_map() {
			// 	let tag_map = {}
			// 	for (var field in this.radio_options_map) {
			// 		tag_map[field] = {};
			// 		let radio_list = this.radio_options_map[field]
			// 		radio_list.forEach(radio_item => {
			// 			tag_map[field][radio_item.value] = radio_item;
			// 		})
			// 	}
			// 	return tag_map
			// }
		},
		created() {

		},
		methods: {
			// 初始化表格数据
			initTableData(option) {
				this.tableData = option.tableData || [];
				
			},
			// 初始化配置
			initTableConfig(option) {
				console.log('初始化 w_table配置', option)

				this.table_columns = option.table_columns || [];
				this.table_row_actions = option.table_row_actions || [];
				this.radio_options_map = option.radio_options_map || {};


				this.table_column_tag_map = this.set_table_column_tag_map()

				this.$log('设置 table_column_tag_map', this.table_column_tag_map)
			},

			set_table_column_tag_map() {
				let tag_map = {}
				for (var field in this.radio_options_map) {
					tag_map[field] = {};
					let radio_list = this.radio_options_map[field]
					radio_list.forEach(radio_item => {
						tag_map[field][radio_item.value] = radio_item;
					})
				}
				return tag_map
			},
			//设置表格配置结束


			onSortChange({
				column,
				prop,
				order
			}) {
				//'ascending' 升序
				//'descending' 降序
				console.log(" column, prop, order");
				console.log(column, prop, order);
			},

			// 选择行
			onSelectionChange(selections){
				console.log(selections,'================================');
				this.$emit('onSelectionChange', selections);
			},

			// 表格行操作
			doTableRowAction(action_item, table_row) {
				console.log('doTableRowAction');
				this.$log('action_item', action_item)
				this.$log('table_row', table_row)


				this.$emit('emitTable', {
					action_item: action_item,
					table_row: table_row,
				})
			},


			//附件查看-例如发票
			do_file_preview(file_url) {
				if (this.isImageUrl(file_url)) {
					this.preview_image_url = file_url
					this.preview_show = true
				} else {
					window.open(file_url, '_blank')
				}
			},

			isImageUrl(url = '') {
				// 定义一个包含图片扩展名的数组  
				const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg'];

				// 获取URL的最后一个部分（通常是文件名），然后检查其扩展名是否在数组中  
				const extension = url.split('.').pop().toLowerCase();
				return imageExtensions.includes(extension);
			},
		},
	};
</script>

<style scoped lang="less">
	.row-action-list {
		text-align: center;
		.flex-center();

		.row-action-item {
			&+.row-action-item:before {
				content: "";
				display: inline-block;
				width: 2px;
				height: 12px;
				background: #aaa;
				margin: 0 12px;
				margin: 0 6px;
				position: relative;
				top: 2px;
			}
		}

		.divider {}
	}

	.render-image-list {
		display: flex;

		.render-image-item {
			margin: 0 5px;
		}
	}


	.preview-box {
		text-align: center;

		.el-image {}
	}
</style>